<template>
    <div class="main-border">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">正常用户</el-menu-item>
            <el-menu-item index="2">违规用户</el-menu-item>
            <el-menu-item index="3">管理员</el-menu-item>

            <div v-show="this.mode == 3" class="addAdminButton">
                <el-button size="mini" type="success" @click="adminRegVisible = true"> 添加管理员</el-button>
                <el-dialog title="添加管理员" :visible.sync="adminRegVisible" width="25%">
                    <span style="margin-left: 10px">新增管理员名称</span>
                    <el-input v-model="adminName" maxlength="8" placeholder="请输入管理员名称" style="padding: 10px 0" clearable
                        required></el-input>
                    <span style="margin-left: 10px">新增管理员账号</span>
                    <el-input v-model="adminAccount" minlength="8" maxlength="10" placeholder="请输入管理员账户"
                        style="padding: 10px 0" clearable required></el-input>
                    <span style="margin-left: 10px">新增管理员密码</span>
                    <el-input v-model="adminPassword" minlength="8" placeholder="请输入管理员密码" style="padding: 10px 0"
                        show-password required></el-input>
                    <span style="margin-left: 10px">确认管理员密码</span>
                    <el-input v-model="adminRePassword" minlength="10" placeholder="请再次输入管理员密码" style="padding: 10px 0"
                        show-password required></el-input>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="regAdmin"> 添加</el-button>
                    </span>
                </el-dialog>

            </div>
        </el-menu>
        <el-table v-show="this.mode == 1" :data="userData" stripe style="width: 100%;color: #5a5c61;">
            <el-table-column label="头像" width="50">
                <template slot-scope="scope">
                    <el-avatar shape="square" :size="23" :src="$store.state.baseApi + scope.row.avatar"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column prop="accountNumber" label="用户账号" show-overflow-tooltip min-width="150" width="150">
            </el-table-column>
            <el-table-column prop="nickname" label="用户昵称" show-overflow-tooltip min-width="150" width="150">
            </el-table-column>
            <el-table-column prop="signInTime" label="注册时间" show-overflow-tooltip width="200">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="sealUser(scope.$index)"> 封号</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-table v-show="this.mode == 2" :data="badUserData" stripe style="width: 100%;color: #5a5c61;">
            <el-table-column label="头像" width="50">
                <template slot-scope="scope">
                    <el-avatar shape="square" :size="23" :src="$store.state.baseApi + scope.row.avatar"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column prop="accountNumber" label="用户账号" show-overflow-tooltip min-width="150" width="150">
            </el-table-column>
            <el-table-column prop="nickname" label="用户昵称" show-overflow-tooltip width="150">
            </el-table-column>
            <el-table-column prop="signInTime" label="注册时间" show-overflow-tooltip width="200">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="unsealUser(scope.$index)"> 解封</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-table v-show="this.mode == 3" :data="userManage" stripe style="width: 100%;color: #5a5c61;">
            <el-table-column prop="accountNumber" label="管理员账号" show-overflow-tooltip width="200">
            </el-table-column>
            <el-table-column prop="adminName" label="管理名称">
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="nowPage" :page-size="7" background
                layout="prev, pager, next,jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: "userList",
    created() {
        this.getUserData();
    },
    methods: {
        handleCurrentChange(val) {
            this.nowPage = val;
            if (this.mode == 1) {
                this.getUserData();
            }
            if (this.mode == 2) {
                this.getBadUserData();
            }
            if (this.mode == 3) {
                this.getUserManage();
            }
        },
        handleSelect(val) {
            if (this.mode !== val) {
                this.mode = val
                if (val == 1) {
                    this.nowPage = 1;
                    this.getUserData();
                }
                if (val == 2) {
                    this.nowPage = 1;
                    this.getBadUserData();
                }
                if (val == 3) {
                    this.nowPage = 1;
                    this.getUserManage();
                }
            }
        },
        getUserData() {
            //正常普通用户
            this.$api.getUserData({
                page: this.nowPage,
                nums: 8,
                status: 0
            }).then(res => {
                if (res.status_code == 1) {
                    this.userData = res.data.list;
                    this.total = res.data.count;
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(e => {
                console.log(e)
            })
        },
        getBadUserData() {
            //违规用户
            this.$api.getUserData({
                page: this.nowPage,
                nums: 8,
                status: 1
            }).then(res => {
                if (res.status_code == 1) {
                    this.badUserData = res.data.list;
                    this.total = res.data.count;
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(e => {
                console.log(e)
            });
        },
        getUserManage() {
            //管理员
            this.$api.getUserManage({
                page: this.nowPage,
                nums: 8,
            }).then(res => {
                if (res.status_code == 1) {
                    this.userManage = res.data.list;
                    this.total = res.data.count;
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(e => {
                console.log(e)
            })
        },
        sealUser(i) {
            console.log(this.userData[i].id);
            this.$api.updateUserStatus({
                id: this.userData[i].id,
                status: 1
            }).then(res => {
                if (res.status_code == 1) {
                    this.getUserData();
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(e => {
                console.log(e)
            })
        },
        unsealUser(i) {
            this.$api.updateUserStatus({
                id: this.badUserData[i].id,
                status: 0
            }).then(res => {
                if (res.status_code == 1) {
                    this.getBadUserData();
                } else {
                    this.$message.error(res.msg)
                }

            }).catch(e => {
                console.log(e)
            })
        },
        regAdmin() {
            if (this.adminPassword == this.adminRePassword) {
                this.$api.regAdministrator({
                    adminName: this.adminName,
                    accountNumber: this.adminAccount,
                    adminPassword: this.adminPassword,
                }).then(res => {
                    if (res.status_code == 1) {
                        this.total = this.total + 1;
                        this.nowPage = Math.ceil(this.total / 8);
                        console.log(this.nowPage);
                        this.getUserManage();
                    } else {
                        this.$message.error(res.msg)
                    }
                }).catch(e => {
                    console.log(e);
                    this.$message.error("添加失败，账号重复或网络异常")
                });
                this.adminRegVisible = false
            }
            else {
                this.$message.error("两次输入的密码不一致");
            }
        },
    },
    data() {
        return {
            mode: 1,
            nowPage: 1,
            total: 63,
            adminRegVisible: false,
            adminAccount: '',
            adminPassword: '',
            adminRePassword: '',
            adminName: '',
            userData: [],
            badUserData: [],
            userManage: [],
        }
    },
}
</script>

<style scoped>
.main-border {
    background-color: #FFF;
    padding: 10px 30px;
    box-shadow: 0 1px 15px -6px rgba(0, 0, 0, .5);
    border-radius: 5px;
}

.block {
    display: flex;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 10px;
    width: 100%;
}

.addAdminButton {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 60px;
    outline: none;
}
</style>